<template>
  <div>
    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="-1" lazy>
        <BlogListCom :tindex="-1"></BlogListCom>
      </el-tab-pane>
      <el-tab-pane
        v-for="item in tabs"
        :key="item.id"
        :name="item.name"
        :label="item.name + item.count"
        lazy
      >
        <BlogListCom :tindex="item.id"></BlogListCom>
      </el-tab-pane>
      <el-tab-pane label="草稿" name="-2" lazy>
        <BlogListCom :tindex="-2"></BlogListCom>
      </el-tab-pane>
      <el-tab-pane label="回收站" lazy name="999">
        <BlogListCom :tindex="999"></BlogListCom>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import BlogListCom from "./components/BlogListCom.vue";
import SearchBlogsCom from "./components/SearchBlogsCom";
export default {
  name: "AllBlogs",
  components: { BlogListCom, SearchBlogsCom }, //注册子组件
  data() {
    return {
      tabs: [],
      activeName: "-1",
      input_title: "", //输入框的值
      blogsData: [], //文章数据
      tabindex: 0, //选项卡index
      hidden_searchcom: false, //是否隐藏搜索子组件
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getRequest("/api/category/admin/list").then((resp) => {
        this.tabs = resp.data;
      });
    },
    // 获取标签栏的index
    handleClick(tab, event) {
      this.tabindex = tab.index;
      console.log("tabindex = " + this.tabindex);
    },
    //根据标题搜索
    search_title() {
      //判断使用的是通用博客子组件还是搜索专用子组件
      if (this.input_title == "") {
        //如果搜索值为空，就隐藏搜索专用子组件，显示通用子组件
        this.hidden_searchcom = false;
      } else {
        //如果搜索值不为空，就显示搜索专用子组件
        this.hidden_searchcom = true;
      }
      const _this = this;
      //发起根据标题搜索请求
      this.getRequest("/blog/getByTitle?title=" + this.input_title).then(
        (resp) => {
          if (resp) {
            _this.blogsData = resp.data;
          }
        }
      );
    },
    total(name) {
      let that = this;
      let count = 0;
      this.$nextTick(function () {
        count = that.$refs[name].total;
        console.log(count);
      });
      return count + "";
    },
  },
};
</script>

<style scoped>
</style>
